<template>
	<div class="attribute-container">
		<div class="head">
			<div>
				<svg aria-hidden="true" class="svg-icon arrow" @click="handleExpand">
					<use v-if="!isExpand" href="#icon-right_arrow_normal"></use>
					<use v-else href="#icon-below_arrow_normal"></use> 
				</svg>
				<span>其它</span>
			</div>
		</div>
 		<div class="body" v-if="isExpand" >
			<div v-for=" field in formFields" style="overflow: hidden;">
				<Vector2DField v-if="field.dataType.type=='v2' && field.display==true  && field.display==true" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
				<EnumField v-if="field.dataType.type=='enum' && field.display==true" :identifier="field.identifier" :label="field.name" :options="field.dataType.specs" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
				<ImgField v-if="field.dataType.type=='img' && field.display==true" :baseUrl="baseUrl"  :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
				<Vector4DField v-if="field.dataType.type=='v4' && field.display==true" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
				<BooleanField v-if="field.dataType.type=='boolean' && field.display==true" :identifier="field.identifier" :label="field.name" :options="field.dataType.specs" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
				<ColorField v-if="field.dataType.type=='color' && field.display==true" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required" @onchange="onchange" />
				<StringField v-if="field.dataType.type=='string' && field.display==true" :identifier="field.identifier" :label="field.name" :length="field.dataType.specs.length" :value="field.dataType.value" :required="field.required" :readonly="field.readonly" @onchange="onchange" />
				<NumberField v-if="field.dataType.type=='float' && field.display==true" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
				<NumberField v-if="field.dataType.type=='int' && field.display==true" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
				<NumberField v-if="field.dataType.type=='double' && field.display==true" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
				<StructField v-if="field.dataType.type=='struct' && field.display==true" :pidentifier="field.identifier" :list="field.dataType.specs" :name="field.name"  @onchange="onchange"/>
			</div>
		</div>	 
	</div>
</template>
 
<script lang="ts" setup>
	import EnumField from "@/components/FormField/EnumField.vue";
	import ImgField from "@/components/FormField/ImgField.vue";
	import Vector2DField from "@/components/FormField/Vector2DField.vue";
	import Vector4DField from "@/components/FormField/Vector4DField.vue";
	import BooleanField from "@/components/FormField/BooleanField.vue";
	import ColorField from "@/components/FormField/ColorField.vue";
	import StringField from "@/components/FormField/StringField.vue";
	import NumberField from "@/components/FormField/NumberField.vue";
	import StructField from "@/components/FormField/StructField.vue";
	import {
	  getActorAssemblyThingmodelFun
	} from "@/api/wdp/actor";
	
	import { getActorParam} from '@/utils/ActorUtil'
	
	const props = defineProps({
		baseUrl: {
			type: String,
			default: () => ""
		},
		data: {
			type: Object,
			default: () => {}
		},
	})
	
	const baseUrl=ref<string>('');
	const data=ref<any>({});
	const loading=ref<boolean>(false);
	let inputParam:any={};
	const formFields=ref<any>([]);
	//let _data:any={};
	const method=ref<string>('');

	async function initForm(){
		loading.value=true;
		getActorAssemblyThingmodelFun({
			product:data.value?.product,
			prefix:"Update"
		})
		.then((res:any) => {
			formFields.value=[];
			method.value="";
			const _thingmodelFun=res.data.thingmodelFun;
			method.value=_thingmodelFun.identifier;
			if(_thingmodelFun.inputData){
				const _data=JSON.parse(_thingmodelFun.inputData);
				let identifier=undefined;
				_data.forEach((item:any) => {
					identifier=item.identifier
					if(identifier!='name' && identifier!='parent' && identifier!='class' 
					&& identifier!='state' && identifier!='product' && identifier!='visible'
					&& identifier!='selected' && identifier!='customData' && identifier!='location'
					&& identifier!='style' && identifier!='locations' && identifier!='action'
					&& identifier!='gizmo' 
					){
						formFields.value.push(item);
					}
				})
				inputParam=getActorParam(null,data.value,formFields.value,undefined,true);
			}
		})
		.catch((e:any) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	watch(props,() => {
			baseUrl.value=props.baseUrl;
			if(props.data){
				data.value=props.data;
				initForm();
			}
		},
	    { immediate: true, deep: true },
	)
	
	const isExpand=ref(false);
	const handleExpand=()=>{
		isExpand.value=!isExpand.value
	}
	
	const emits = defineEmits(['onchange'])
	const onchange=(input:{pidentifier:string,identifier:string,value:any})=>{
		if(input.pidentifier){
			let pids=input.pidentifier.split(".");
			let pdata=inputParam;
			for(let p of pids){
				if(pdata.hasOwnProperty(p)){
					pdata=pdata[p];
				}
			}
			if(pdata.hasOwnProperty(input.identifier)){
				pdata[input.identifier]=input.value;
			}
		}else{
			if(inputParam.hasOwnProperty(input.identifier)){
				inputParam[input.identifier]=input.value;
			}
		}
		
		emits('onchange',{
			type:"customParams",
			data:{
				method:method.value,
				data:inputParam,
			}
		})
		
	}
	
	
	// const onchange=(e:any)=>{
	// 	emits('onchange',e)
	// }
</script>

<style scoped>
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	
	:deep(.el-input-number.is-controls-right .el-input__wrapper) {
	    padding-left: 15px;
	    padding-right: 26px;
	}
</style>